<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /*父元素开启透视效果 */
            perspective: 1000px;
        }

        @keyframes animate {
            0% {
                transform: rotateX(var(--x-rotate)) rotateY(0deg);
            }

            100% {
                transform: rotateX(var(--x-rotate)) rotateY(360deg);
            }
        }

        section {
            position: relative;
            width: 300px;
            height: 200px;
            transform-style: preserve-3d;
            animation: animate 10s linear infinite;
            margin: 300px auto;
        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        section div img {
            width: 100%;
            height: 100%;
            transition: transform 0.3s;
            /* 添加过渡效果 */
        }

        .enlarged {
            transform: scale(1.2);
            /* 定义放大样式 */
        }

        input {
            outline: none;
        }

        section:hover {
            /* 鼠标移入时停止动画 */
            animation-play-state: paused;
        }

        section div:nth-child(1) {
            transform: rotateY(0deg) translateZ(300px);
        }

        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }

        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }

        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }

        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }

        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }

        .return {
            position: fixed;
            right: 0%;
            bottom: 0%;
            display: block;
            width: 100px;
            height: 30px;
            background-color: #e38a0e;
            color: #fff;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <label for="xRotateInput">请输入 X 轴旋转角度：</label>
    <input type="text" id="xRotateInput" value="0">
    <section>
        <div><a href="首页.html"><img src="./imges/t2.jpg"></a></div>
        <div><a href="首页.html"><img src="./imges/t3.jpg"></a></div>
        <div><a href="首页.html"><img src="./imges/t4.jpg"></a></div>
        <div><a href="首页.html"><img src="./imges/t5.jpg"></a></div>
        <div><a href="首页.html"><img src="./imges/t6.jpg"></a></div>
        <div><a href="首页.html"><img src="./imges/OIP-C.jpg"></a></div>
    </section>
    <a href="首页.html" class="return">返回</a>
    <script>
        const xRotateInput = document.getElementById('xRotateInput');
        const section = document.querySelector('section');
        const imgs = document.querySelectorAll('section div img'); // 获取所有图片
        xRotateInput.addEventListener('input', function () {
            const xRotateValue = this.value;
            // 检查输入是否为有效数字
            if (isNaN(xRotateValue)) {
                alert('请输入有效的数字作为 X 轴旋转角度');
                this.value = 0; // 重置输入框的值为 0
                document.documentElement.style.setProperty('--x-rotate', '0deg');
                return;
            }

            if (xRotateValue < 0 || xRotateValue > 360) {
                // 停止动画
                section.style.animationPlayState = 'paused';
                alert('X 轴旋转角度必须在 0 到 360 之间');
                this.value = 0;
                document.documentElement.style.setProperty('--x-rotate', '0deg');
                return;
            }
            //恢复动画并缩小图片
            section.style.animationPlayState = 'running';
            imgs.forEach(img => img.classList.remove('enlarged'));
            document.documentElement.style.setProperty('--x-rotate', `${xRotateValue}deg`);
        });
        // 为每张图片添加鼠标移入和移出事件监听
        imgs.forEach(img => {
            img.addEventListener('mouseenter', function () {
                section.style.animationPlayState = 'paused';
                this.classList.add('enlarged');
            });

            img.addEventListener('mouseleave', function () {
                section.style.animationPlayState = 'running';
                this.classList.remove('enlarged');
            });
        });
    </script>
</body>

</html>